<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>融资产品</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="./css/base.css">
</head>

<body>
    <!-- 首页 HTML 代码 -->
    <header>
        <div class="flex_bgc flex-between-center">
            <div id="header-Logo">
                <p>湖南省科技金融服务</p>
                <p>中心线上平台</p>
            </div>
            <ul class="layui-nav" style="background-color: #001A4D;">
                <li class="layui-nav-item"><a href="./index.html">首页</a></li>
                <li class="layui-nav-item"><a href="./financingServices.html">融资服务</a></li>
                <li class="layui-nav-item layui-this"><a href="javaScript:;">金融产品</a></li>
                <li class="layui-nav-item"><a href="./financialInstitution.html">金融机构</a></li>
                <li class="layui-nav-item"><a href="./innovation.html">科技创新板块</a></li>
                <li class="layui-nav-item"><a href="./technologyService.html">科技服务</a></li>
                <li class="layui-nav-item"><a href="./policyGuidelines.html">政策指南</a></li>
                <li class="layui-nav-item"><a href="./innovationInformation.html">创新咨询</a></li>
                <li class="layui-nav-item"><a href="./resourceServices.html">资源服务</a></li>
                <li class="layui-nav-item"><a href="./aboutUs.html">关于我们</a></li>
            </ul>
        </div>
    </header>
    <main>
        <div class="main-top">
            <h1 style="font-size: 30px;">金融产品</h1>
            <div class="flex-center-center" style="margin-top: 40px;">
                <div class="inputWidth"><input type="text" class="baseInput"></div>
                <button type="button" class="layui-btn layui-btn-normal">
                    <i class="layui-icon layui-icon-search"></i> 搜索
                </button>
            </div>
        </div>
        <div class="main-padding">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">湘科贷</li>
                    <li>湘科投</li>
                    <li>湘科保</li>
                    <li>湘创板</li>
                    <li>默认选项</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div class="main-tab">
                            <ul style="margin-bottom: 20px;">
                                <li>全部</li>
                                <li>债权融资服务</li>
                                <li>股权融资服务</li>
                                <li>科技保险服务</li>
                                <li>上市融资服务</li>
                            </ul>
                            <ul>
                                <li>全部</li>
                                <li>软件</li>
                                <li>信息服务</li>
                                <li>集成电路即电子元件</li>
                                <li>网络与通信</li>
                            </ul>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="main-tab">
                            <ul style="margin-bottom: 20px;">
                                <li>全部</li>
                                <li>债权融资服务</li>
                                <li>股权融资服务</li>
                                <li>科技保险服务</li>
                                <li>上市融资服务</li>
                            </ul>
                            <ul>
                                <li>全部</li>
                                <li>软件</li>
                                <li>信息服务</li>
                                <li>集成电路即电子元件</li>
                                <li>网络与通信</li>
                            </ul>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="main-tab">
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="main-tab">
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="main-tab">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="main-padding ">
            <div class="main-content">
                <ul class="flex-between " style="flex-wrap: wrap;">
                    <li class="main-content_box flex-between-center">
                        <div class="flex-between-center" style="width: 70%;" onclick="pageDetailClick()">
                            <h4>头贷跟</h4>
                            <div>
                                <p>参考利率</p>
                                <p>3.85% - 3.85%</p>
                            </div>
                            <div>
                                <p>贷款额度</p>
                                <p>10万元 - 100万元</p>
                            </div>
                            <div>
                                <p>贷款期限</p>
                                <p>10天 - 180天</p>
                            </div>
                            <div>
                                <p>增信方式</p>
                                <p>第三方保证</p>
                            </div>
                        </div>
                        <div class="flex-center">
                            <div>融资洽谈</div>
                            <p style="margin: 0 20px;">|</p>
                            <div onclick="submitDemand(true,'123')">提交需求</div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="flex-flexEnd paging">
                <div id="pageDom"></div>
            </div>
        </div>
    </main>
    <dialog class="dialog-box"></dialog>
    <footer>
        <div class="footer-box">
            <div class="footer-left flex-between">
                <p>帮助</p>
                <p>隐私</p>
                <p>条款</p>
            </div>
            <div class="footer-right flex-between">
                <p>copyright</p>
                <p>©ICP备案： 湘ICP备19020675号-1</p>
            </div>
        </div>
    </footer>
</body>
<script src="./layui/layui.js"></script>
<script src="./js/jquery.js"></script>
<script src="./js/include.js"></script>

<script>
    //触发
    layuiClick()
    dialogLoading()

    //方法
    function layuiClick() {
        //分页
        layui.use('laypage', function () {
            var laypage = layui.laypage;
            //执行一个laypage实例
            laypage.render({
                elem: 'pageDom',
                limit: 6, //每页几条数据
                count: 70, //数据总数，从服务端得到
                limits: [6, 12, 18],  //每页条数的选择项
                layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
                jump: function (obj, first) {
                    //obj包含了当前分页的所有参数，比如：
                    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                    console.log(obj.limit); //得到每页显示的条数
                    //首次不执行
                    if (!first) {
                        layer.msg('第' + obj.curr + '页', { offset: 'b' });
                    }
                }
            });
        });
        //文件上传
        layui.use('upload', function () {
            var upload = layui.upload;

            //执行实例
            var uploadInst = upload.render({
                elem: '#uploadFile' //绑定元素
                , url: '/upload/' //上传接口
                , done: function (res) {
                    //上传完毕回调
                }
                , error: function () {
                    //请求异常回调
                }
            });
        });
        //表单提交
        layui.use('form', function () {
            var form = layui.form;
            //监听提交
            form.on('submit(formDemo)', function (data) {
                console.log(data.field)
                //关闭弹窗
                submitDemand(false)
            });
        });
    }
    function pageDetailClick() {
        location.href = './components/financingDetail.html?pageIndex=2'
    }
    // diglog弹出框
    function submitDemand(show, e) {
        var dialog = document.querySelector('dialog')
        if (show) {
            dialog.showModal()
        } else {
            dialog.close()
        }
    }
</script>
<style scoped>
    /* layui样式 调整 */
    .layui-form-label {
        width: 160px;
    }

    .layui-input-block {
        margin-left: 170px;
    }

    .layui-tab-title li {
        font-size: 18px;
        min-width: 9%;
    }

    /* 内容标题头部 */
    .main-padding {
        margin: 0 12% 20px;
        padding: 20px;
        background-color: #fff;
    }

    .main-top {
        text-align: center;
        margin: 80px 0;
    }

    .main-tab {
        padding: 20px 0 0;
    }

    .main-tab ul {
        display: flex;
    }

    .main-tab ul li {
        margin: 10px 20px;
    }

    /*  */
    .main-content {
        margin: 20px 0;
        background-color: #fff;
        padding: 20px;
    }

    .main-content_box {
        width: 100%;
        padding: 20px;

        font-size: 16px;
        border-bottom: 1px #dad7d7 solid;
    }

    .main-content_box:nth-last-child(1) {
        border-bottom: 0px;
    }

    .main-content_box h4 {
        font-size: 20px;
        font-weight: 600;
    }

    .main-content_box div p:nth-child(odd) {
        color: #b1b1b1;
        margin-bottom: 10px;
    }

    .main-content_box div p:nth-child(even) {
        color: #2066f3;
        font-size: 20px;
    }
</style>

</html>